<%@ page import="com.example.softwareconfigurationcoursedesign.ProductService" %>
<%@ page import="com.example.softwareconfigurationcoursedesign.Product" %>
<%@ page import="java.util.List" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>商品管理</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid black;
        }

        th, td {
            padding: 8px;
            text-align: left;
        }

        button {
            background-color: #f25d8e;
            box-shadow: 0 4px 4px rgba(255, 112, 159, .3);
            color: #e7e7e7;
            border: none;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.1rem;
            padding: 5px 10px;
            text-transform: uppercase;
            transition: transform 80ms ease-in;
        }
    </style>
</head>
<body>
<h1>商品列表</h1>
<h2>搜索商品</h2>
<form action="searchProduct" method="get">
    <div >
        <label>关键字:</label>
        <input type="text" id="searchKeyword" name="searchKeyword">
        <button type="submit">搜索</button>
    </div>
</form>
<table id="productTable">
    <%
        Connection connection;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String jdbcUrl = "jdbc:mysql://localhost:3306/course_design";
            String username = "root";
            String password = "123456";
            connection = DriverManager.getConnection(jdbcUrl, username, password);
            connection.createStatement();
        } catch (Exception ignored) {
        } finally {
        }
    %>
    <tr>
        <th>ID</th>
        <th>产品ID</th>
        <th>产品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>详情</th>
        <th>操作</th>
    </tr>
    <!-- 使用JSP动态生成商品列表 -->
    <%
        ProductService productService = new ProductService();
        List<Product> productList = productService.getProductListFromDatabase(); // 从数据库中获取产品列表
        for (Product product : productList) {
    %>
    <tr>
        <td><%= product.getId() %>
        </td>
        <td><%= product.getPid() %>
        </td>
        <td><%= product.getPname() %>
        </td>
        <td><%= product.getPprice() %>
        </td>
        <td><%= product.getPtag() %>
        </td>
        <td><%= product.getDetail() %>
        </td>
        <td>
                <button  onclick="openEditProductWindow()">编辑</button>
            <form action="deleteProduct" method="post">
                <input type="hidden" name="productId" value="<%= product.getId() %>"><%--  隐藏域--%>
                <button >删除</button>
            </form>
        </td>
    </tr>
    <%
        }
    %>
</table>
<form action="addProduct" method="post">
    <div id="addProductModal" class="modal">
        <div class="modal-content">
            <h2>添加商品</h2>

            <label for="productName">产品名称:</label>
            <input type="text" id="productName" name="productName">
            <br>
            <label for="productPrice">价格:</label>
            <input type="number" id="productPrice" name="productPrice">
            <br>
            <label for="productTag">标签:</label>
            <input type="text" id="productTag" name="productTag">
            <br>
            <label for="productDetail">详情:</label>
            <input type="text" id="productDetail" name="productDetail">
            <br>
            <button onclick="window.location.href='Admin.html'">添加商品</button>
        </div>
    </div>
</form>



<script>
    // JavaScript代码用于处理商品的增删改查操作
    // function addProduct() {
    //     // 获取表单中的商品信息
    //     const productName = document.getElementById("productName").value;
    //     const productPrice = parseFloat(document.getElementById("productPrice").value);
    //     const productTag = document.getElementById("productTag").value;
    //     const productDetail = document.getElementById("productDetail").value;
    //
    //     // 创建一个FormData对象，用于发送表单数据
    //     const formData = new FormData();
    //     formData.append("name", productName);
    //     formData.append("price", productPrice);
    //     formData.append("tag", productTag);
    //     formData.append("detail", productDetail);
    //
    //     // 发送POST请求到后端，调用AddProductServlet来添加商品
    //     fetch("AddProductServlet", {
    //         method: "POST",
    //         body: formData,
    //     })
    //         .then(response => {
    //             if (response.ok) {
    //                 // 显示成功添加商品的提示信息
    //                 alert("商品添加成功！");
    //                 // 清空表单字段
    //                 document.getElementById("productName").value = "";
    //                 document.getElementById("productPrice").value = "";
    //                 document.getElementById("productTag").value = "";
    //                 document.getElementById("productDetail").value = "";
    //                 location.reload(); // 更新商品列表或提供适当的反馈
    //             } else {
    //                 throw new Error("商品添加失败!");
    //             }
    //         })
    //         .catch(error => {
    //             console.error("商品添加失败!", error);
    //         });
    // }



    function openAddProductModal() {
        document.getElementById("addProductModal").style.display = "block";
    }

    function openEditProductWindow() {
        window.open("editProduct.jsp", "_blank", "width=400,height=300");
    }

    function closeAddProductModal() {
        document.getElementById("addProductModal").style.display = "none";
    }

    // function editProduct(productId) {
    //     // 获取要编辑的商品信息
    //     const productName1 = document.getElementById("productName").value;
    //     const productPrice1 = parseFloat(document.getElementById("productPrice").value);
    //     const productTag1 = document.getElementById("productTag").value;
    //     const productDetail1 = document.getElementById("productDetail").value;
    //     // 发送POST请求到后端，调用EditProductServlet来编辑商品
    //     // 更新商品列表或提供适当的反馈
    //     // 你可以使用fetch或者axios等工具发送POST请求
    //     fetch("EditProductServlet", {
    //         method: "POST",
    //         headers: {
    //             "Content-Type": "application/json"
    //         },
    //         body: JSON.stringify({
    //             id: productId,
    //             name: productName1,
    //             price: productPrice1,
    //             tag: productTag1,
    //             detail: productDetail1
    //         })
    //     })
    //         .then(response => {
    //             if (response.ok) {
    //                 // 处理成功编辑商品的情况，可以更新商品列表或提供适当的反馈
    //             } else {
    //                 throw new Error("Failed to edit product");
    //             }
    //         })
    //         .catch(error => {
    //             console.error(error);
    //         });
    // }

    // function deleteProduct(productId) {
    //     // 发送POST请求到后端，调用DeleteProductServlet来删除商品
    //     // 更新商品列表或提供适当的反馈
    //     // 你可以使用fetch或者axios等工具发送POST请求
    //     fetch("DeleteProductServlet", {
    //         method: "POST",
    //         headers: {
    //             "Content-Type": "application/json"
    //         },
    //         body: JSON.stringify({
    //             id: productId
    //         })
    //     })
    //         .then(response => {
    //             if (response.ok) {
    //                 // 处理成功删除商品的情况，可以更新商品列表或提供适当的反馈
    //             } else {
    //                 throw new Error("Failed to delete product");
    //             }
    //         })
    //         .catch(error => {
    //             console.error(error);
    //         });
    // }
</script>
</body>
</html>
